<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: space-around;
        }

        main {
            border: 20x solid rgba(41, 37, 37, 0.686);
            margin: 60px;
            box-sizing: border-box;
            justify-content: space-between;
            display: flex;
            flex-wrap: wrap;
            width: 1000px;
            height: 800px;
        }

        main .box {
            box-sizing: border-box;
            width: 240px;
            height: 400px;
            border: 1px solid rgb(171, 171, 171);
        }

        main .box img {
            width: 100%;
            height: 80%;
        }

        main .box .bnn {
            color: antiquewhite;
            background-color: rgb(237, 46, 46);
            border: 0;
            width: 80px;
            height: 30px;
        }

        .right {
            display: flex;
            flex-direction: column;
            width: 400px;
            height: 800px;
            margin: 60px;
            background-color: rgb(209, 241, 240);
        }

        h3 {
            margin: 20px;
        }

        .right .xia {
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 760px;
        }

        .right .small {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            height: 150px;
            background-color: rgb(166, 192, 192);
        }

        .right .small .zhong .imm {
            width: 80px;
        }

        .right>.small>.zhong>p {
            font-size: 12px;
            align-self: end;
        }

        .inn {
            width: 20px;
            height: 20px;
        }

        .right .small .jishi {
            line-height: 30px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: rgb(79, 79, 79);
        }

        .right .small .jiage {
            line-height: 30px;
            display: inline-block;
            height: 30px;
            background-color: rgb(79, 79, 79);
            text-align: center;
            width: 60px;
        }

        .right .small .remove {
            font-size: 18px;
        }

        .right .small .but {
            width: 20px;
            background-color: gray;
        }

        .right .small .buts {
            width: 20px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <main>
    </main>
    <div class="right">
        <h3>购物车(0)</h3>
        <div class="xia">
            <!-- <div class="small">
                <input class="inn" type="checkbox">
                <img class="imm" src="img/pic1.png" alt="">
                <button class="but">+</button>
                <span class="jishi"></span>
                <button class="buts">-</button>
                <span class="jiage">100</span>
                <span class="remove">删除收藏</span>
            </div> -->
        </div>
    </div>
</body>

</html>
<script>

    class gowuche {
        constructor(main, xiaEle, arr, arr2) {
            this.data = arr
            this.mainEle = main
            this.xiaEle = xiaEle
            this.render()
            // this.rendergo()
            this.bindright()
            this.bindleft()
            
        }
        // 图片渲染
        render() {
            // ================渲染左边购物样式===============================
            var str = ``
            // for (var i = 0; i < this.data.length; i++) {
            //     str += `
            //     <div class="box">
            //         <img src="${this.data[i].pic}" alt="">
            //         <span>${this.data[i].name}</span>
            //         <p>${this.data[i].jiage}</p>
            //         <button class= "bnn" data-id='${goods.id}'>${"加入购物车"}</button>
            //     </div>`
            //     this.mainEle.innerHTML = str
            // }

            this.mainEle.innerHTML =arr.map((goods)=>{
                return str=`
                <div class="box">
                    <img src="${goods.pic}" alt="">
                    <span>${goods.name}</span>
                    <p>${goods.jiage}</p>
                    <button class= "bnn" data-id='${goods.id}'>${"加入购物车"}</button>
                </div>`
            }).join('')




        }
        rendergo() {
            // ================渲染购物车样式===============================
            var str2 = ``
            this.xiaEle.innerHTML =arr.map((goods)=>{
                return str2=`
                <div class="small"> 
                    <input class="inn" type="checkbox" ${goods.is_checked ? 'checked' : ''}>
                    <div class="zhong">
                        <img class="imm" src="${goods.pic}" alt="">
                        <p>${goods.name}</p>
                    </div>
                    <button class="but" data-id='${goods.id}'>${"+"}</button>
                    <span class="jishi">${goods.sdd}</span>
                    <button class="buts" data-id='${goods.id}'>${"-"}</button>
                    <span class="jiage">${goods.jiage}</span>
                    <span class="remove">${"删除收藏"}</span>
                </div>`
            }).join('')
        }

                // for (var i = 0; i < this.data.length; i++) {
                // str2 += `
                // <div class="small"> 
                //     <input class="inn" type="checkbox" ${this.data[i].is_checked ? 'checked' : ''}>
                //     <div class="zhong">
                //         <img class="imm" src="${this.data[i].pic}" alt="">
                //         <p>${this.data[i].name}</p>
                //     </div>
                //     <button class="but" data-id='${this.data[i].id}'>${"+"}</button>
                //     <span class="jishi">${this.data[i].sdd}</span>
                //     <button class="buts" data-id='${this.data[i].id}'>${"-"}</button>
                //     <span class="jiage">${this.data[i].jiage}</span>
                //     <span class="remove">${"删除收藏"}</span>
                // </div>`
                // this.xiaEle.innerHTML = str2
            // }


            
        // ==================================左侧购物点击事件=================================
        bindleft() {
            //购物左边点击事件
            this.mainEle.onclick = (e) => {
                if (e.target.className == 'bnn') {
                    // let id = e.target.dataset.id
                    console.log(id);
                    let goods = arr2.find(item => item.id == e.target.dataset.id)
                    goods.id
                    var index = arr2.findIndex((item)=>{
                    return item == e.target;})
                    // oo.arr2.push( arr[index] );
                    this.rendergo()
                    console.log('我被点击被渲染了',goods.id);
                }
            }
        }
        // ==================================购物车点击渲染加减事件=================================
        bindright() {
            // 购物车里的点击事件
            document.querySelector('.xia').onclick = (e) => {
                console.log('我被渲染了');
                if (e.target.className == 'but') {
                    // let id = e.target.dataset.id
                    // console.log(id);
                    let goods = arr.find(item => item.id == e.target.dataset.id)
                    // goods.sdd++
                    if (goods.sdd <= 9 && goods.sdd >= 1) {
                        goods.sdd++
                    } else if (goods.sdd == 10) {
                        alert('亲，最多只购买10个哟！！！')
                    }
                    this.rendergo()
                }
                if (e.target.className == 'buts') {
                    let goods = arr.find(item => item.id == e.target.dataset.id)
                    if (goods.sdd <= 10 && goods.sdd >= 2) {
                        goods.sdd--
                    } else if (goods.sdd == 1) {
                        alert('亲，已经最后一个咯！！！')
                    }
                    this.rendergo()
                }

            }


        }















    }
    let mainEle = document.querySelector('main')
    let xiaEle = document.querySelector('.xia')

    let arr = [
        { id: 1, name: "高级办公椅", pic: 'img/pic1.png', jiage: 10000, sdd: 1, is_checked: false, num: 10000 },
        { id: 2, name: "高级办公椅", pic: 'img/pic2.png', jiage: 1000, sdd: 1, is_checked: false, num: 1000 },
        { id: 3, name: "电动按摩椅", pic: 'img/pic3.png', jiage: 100, sdd: 1, is_checked: false, num: 100 },
        { id: 4, name: "高级办公椅", pic: 'img/pic4.png', jiage: 10, sdd: 1, is_checked: false, num: 10 },
        { id: 5, name: "老板椅", pic: 'img/pic5.png', jiage: 20000, sdd: 1, is_checked: false, num: 20000 },
        { id: 6, name: "办公桌", pic: 'img/pic6.png', jiage: 50000, sdd: 1, is_checked: false, num: 50000 },
        { id: 7, name: "升降办公椅", pic: 'img/pic7.png', jiage: 2000, sdd: 1, is_checked: false, num: 2000 },
        { id: 8, name: "升降办公桌", pic: 'img/pic8.png', jiage: 5000, sdd: 1, is_checked: false, num: 5000 },
    ]
    let arr2 =[]
    var gowuches = new gowuche(mainEle, xiaEle, arr)

</script>